<template>
  <div class="stationList">
    <div class="search_view">
      <img :src="search_icon" alt class="search_icon">
      <input type="text" v-model="title" @input="getlist()" class="input" placeholder="搜索站点" @blur="inputBack()">
    </div>
    <div class="title-box">
      <div class="title-item" @click="changeType(1)">
        <div :class="modeType == 1?'text-highLight':'text'">所有站点</div>
      </div>
      <div class="title-item" @click="changeType(2)">
        <div :class="modeType == 2?'text-highLight':'text'">维护中</div>
      </div>
    </div>
    <div class="line-box">
      <div class="left" :style="modeType== 1?'width:1.5rem;':'width:6.5rem'"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="show-contant" ref="wrapper">
      <div class="show-scroll-contant">
        <div
          class="item-contant"
          v-for="(item,index) in List"
          :key="index"
          @click="jumpTo(item.id)"
        >
          <div class="item-header-contant">
            <div class="name-contant">{{item.title}}</div>
            <div class="number-contant">
              共
              <span>{{item.num}}</span> 个插头
            </div>
          </div>
          <div class="item-middle-contant">
            <div class="text-contant">{{item.address}}</div>
            <div class="button" v-if="item.status == 1">在线</div>
            <div class="button1" v-if="item.status == 2">离线</div>
          </div>
          <div class="item-bottom-contant">
            <div class="item-status-contant">
              <div class="status-contant">
                <span class="one">闲</span>
                <span class="num">{{item.num-item.charging_num}}</span>
              </div>
              <div class="status-contant">
                <span class="two">充</span>
                <span class="num">{{item.charging_num}}</span>
              </div>
            </div>
            <div class="elc-contant">
              <Power :number="item.sign" :color="true"></Power>
            </div>
          </div>
          <i class="iconfont icon-dizhi title-icon"></i>
        </div>
      </div>
      <div class="nothing-contant" v-if="List.length<=0">
        <img :src="nothing" alt>
        <div class="text">查询不到任何站点</div>
      </div>
    </div>
  </div>
</template>
   
<style lang="less" scoped>
@import "index.less";
</style>

<script>
import Power from "../../../components/power/index";
import BScroll from "better-scroll";
export default {
  name: "stationList",
  data() {
    return {
      search_icon: require("../../../assets/images/search_icon.png"),
      nothing: require("../../../assets/nothing.png"),
      List: {},
      scroll: {},
      lock: false,
      title: "",
      modeType: 1
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    jumpTo(id) {
      this.$router.push({
        path: "/AdminStation",
        query: {
          id: id
        }
      });
    },
    changeType(index) {
      this.modeType = index;
      this.getlist();
    },
    getlist() {
      this.$dialog.loading.open("正在加载");
      this.page = 1;
      this.$http
        .get("/device/Adminlist", {
          params: {
            page: this.page,
            title: this.title,
            status: this.modeType
          }
        })
        .then(res => {
          this.List = res.data.data;
          this.$forceUpdate();
          this.scrollInit();
          this.$dialog.loading.close();
        });
    },
    scrollInit() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        pullUpLoad: {
          threshold: -50
        }
      });
      this.scroll.on("pullingUp", () => {
        if (this.lock) {
          return;
        }
        // 页数加一
        this.page++;
        // 锁定防止多次加载
        this.lock = true;
        this.$dialog.loading.open("正在加载");
        this.$http
          .get("/device/Adminlist", {
            params: {
              page: this.page,
              title: this.title,
              status: this.modeType
            }
          })
          .then(res => {
            if (res.data.data.length <= 0) {
              this.$dialog.toast({
                mes: "没有更多的数据",
                timeout: 1500,
                icon: "none"
              });
              this.lock = true;
            } else {
              // 解锁上拉
              this.lock = false;
            }
            this.List = this.List.concat(res.data.data);
            this.$forceUpdate();
            this.scroll.finishPullUp();
            this.scroll.refresh();
            this.$dialog.loading.close();
          });
      });
    }
  },
  components: {
    Power
  }
};
</script>
